//设置根路径
axios.defaults.baseURL = 'http://ajax-api.itheima.net'

//发起请求获取第一级数据
axios({ method: 'get', url: '/api/category/top' })
  .then(({ data: res }) => {
    //发起二级数据的请求
    const requestArr = res.data.map(item => {
      return axios({ method: 'get', url: '/api/category/sub?id=' + item.id })
    })

    //继续使用获取到的数据进行渲染
    return Promise.all(requestArr)
  })
  .then(res => {
    const renderDataList = res.map(item => {
      const { data } = item
      return data
    })
    // console.log(renderDataList)
    const renderList = renderDataList
      .map(item => {
        return `<li>
      <a href="javascript:;">${item.data.name}</a>
      <ul class="sub">
        ${item.data.children
          .map(item => {
            return `<li>
          <a href="javascript:;">
            <span>${item.name}</span>
            <img src="${item.picture}" alt="">
          </a>
        </li>`
          })
          .join('')}
      </ul>
    </li>`
      })
      .join('')

    document.querySelector('.top').innerHTML = renderList
  })
